<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>试题类型列表</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">

    <div style="float: left;">
        <el-button type="primary" @click="showAddPage">添加试题类型</el-button>
        <el-button type="danger" @click="deleteMany()">批量删除</el-button>
    </div>
    <!-- 试题类型列表 -->
    <el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="paperId" label="试题类型id" width="120">
        </el-table-column>
        <el-table-column prop="level" label="试题等级" width="350">
        </el-table-column>
        <el-table-column prop="cover" label="封面">
            <template slot-scope="scope">
                <img :src="scope.row.cover" alt="" height="20px" width="20px"/>
            </template>
        </el-table-column>
        <el-table-column label="难度系数">
            <template slot-scope="scope">
                {{getStar(scope.row.star)}}
            </template>
        </el-table-column>
        <el-table-column  label="图片上传" width="350">
            <template slot-scope="scope">
                <el-upload
                        class="upload-demo"
                        :action="getURL(scope.row.paperId)"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="1"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </template>
        </el-table-column>

        <!--<el-table-column prop="created" label="提交时间">-->
        <!--</el-table-column>-->
        <!--<el-table-column prop="updated" label="跟新时间">-->
        <!--</el-table-column>-->

        <el-table-column label="操作" width="180">
            <template slot-scope="props">
                <el-button type="warning" @click="showEditPaper(props.row)">编辑</el-button>
                <el-button type="danger" @click="deletePaper(props.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[3,5,8]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>



    <el-dialog title="添加试题类型信息" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="试题类型id" prop="paperId" v-show="false">
                <el-input v-model="formData.paperId"></el-input>
            </el-form-item>
            <el-form-item label="试题类型id" prop="paperId" v-show="false">
                <el-input v-model="formData.cover"></el-input>
            </el-form-item>
            <el-form-item label="试题等级" prop="level" >
                <el-select v-model="formData.level" placeholder="请选择试题等级" @change="setStar(formData.level)">
                    <el-option label="初级试题" value="2"></el-option>
                    <el-option label="中级试题" value="3"></el-option>
                    <el-option label="高级试题" value="5"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="试题难度系数">
                <el-input :value="getStar(this.star)"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="addPaper()">添加</el-button>
                <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog title="编辑试题类型" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')">
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="editFormData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="试题类型id" prop="paperId" v-show="false">
                <el-input v-model="formData.paperId"></el-input>
            </el-form-item>
            <el-form-item label="试题类型id" prop="paperId" v-show="false">
                <el-input v-model="formData.cover"></el-input>
            </el-form-item>
            <el-form-item label="试题等级" prop="level" >
                <el-select v-model="formData.level" placeholder="请选择试题等级" @change="setStar(formData.level)">
                    <el-option label="初级试题" value="2"></el-option>
                    <el-option label="中级试题" value="3"></el-option>
                    <el-option label="高级试题" value="5"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="试题难度系数">
                <el-input :value="getStar(this.star)"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="warning" @click="updatePaper()">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script>
    new Vue({
        el:"#app",
        data: {

            fileList: [],
            star:"",
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            formData: {},//添加表单的数据
            editFormData: {},//编辑表单的数据
            tableData: [],//表格数据
            multipleSelection: [],//全选框
            pagination: {
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 0        //总条数
            },
            paper: {},
            rules: {
                level: [
                    { required: true, message: '请输入试题等级', trigger: 'change' },
                ],
                star: [
                    { required: true, message: '请选择试题难度系数', trigger: 'change' }
                ],
            }
        },
        methods: {
            //批量删除
            deleteMany() {
                this.$alert('确定删除?', '删除提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        let num = "";
                        for (let el of this.multipleSelection) {
                            num += el.paperId + ",";
                        }
                        //console.log(num);
                        axios.delete("../paper/many/"+num)
                            .then(resp => {
                                if (resp.data) {
                                    action = "删除成功!";
                                    this.selectByPage();
                                    this.$message({
                                        type: 'info',
                                        message: `action: ${ action }`
                                    });
                                } else {
                                    action = "删除失败!";
                                    this.$message({
                                        type: 'info',
                                        message: `action: ${ action }`
                                    });
                                }
                            })
                            .catch(error => {
                                console.log(error);
                            })

                    }
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //删除试题类型信息
            deletePaper(row) {
                this.$confirm('此操作将永久删除' + row.paperId + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("../paper/"+row.paperId)
                        .then(resp => {
                            if (resp.data) {
                                this.dialogTableVisible4edit = false;
                                this.selectByPage();
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '删除失败!'
                                });
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                if (confirm("确定要删除" + row.paperId + "数据吗?")) {

                }
            },
            //修改试题类型信息
            updatePaper() {
                this.editFormData.star=this.star;
                axios.put("../paper", this.editFormData)
                    .then(resp => {
                        if (resp.data) {
                            this.dialogTableVisible4edit = false;
                            this.selectByPage();
                            this.star="";
                        } else {
                            alert("修改失败");
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            //添加问题
            addPaper() {
                this.formData.star=this.formData.level;
                axios.post("../paper", this.formData)
                    .then(resp => {
                        if (resp.data) {
                            this.dialogTableVisible4add = false;
                            this.selectByPage();
                            this.star="";
                        } else {
                            alert("添加失败");
                        }

                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            //分页查询
            selectByPage() {
                axios.get("../paper/"+this.pagination.currentPage+"/"+this.pagination.pageSize)
                    .then(resp => {
                        //将查询出的数据赋值tableData
                        this.tableData = resp.data.records;
                        //设置分页参数
                        //当前页
                        this.pagination.currentPage = resp.data.current;
                        //总条数
                        this.pagination.total = resp.data.total;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.selectByPage();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum) {
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.selectByPage();
            },
            showAddPage() {
                //弹出窗口
                this.dialogTableVisible4add = true;
            },
            resetForm(addForm) {
                //双向绑定，输入的数据都赋值给了formData， 清空formData数据
                this.formData = {};
                //清除表单的校验数据
                this.$refs[addForm].resetFields();
                //清空star
                this.star="";
            },
            showEditPaper(row) {
                //1. 弹出窗口
                this.dialogTableVisible4edit = true;

                //2. 显示表单数据
                this.editFormData = {
                    paperId: row.paperId,
                    level: row.level,
                    star: row.star,
                    cover: row.cover,
                }
                this.star = row.star;
            },
            getStar(star){
                let level = "★";
                for (let i = 0; i < star-1; i++) {
                    level+="★";
                }
                return level;
            },
            setStar(level){
                this.star=level;
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            getURL(paperId){
                return "../paper/upload/"+paperId;
            }
        },
        mounted() {
            this.selectByPage();
        }
    })
</script>
</body>
</html>